<template>
  <view class="rlyyxz">
    <view class="topsjian">
      <view> 预约时间 </view>
      <view v-if="rixz"
        >{{ currentYear }}年{{ currentMonth + 1 }}月{{ rixz }}日</view
      >
    </view>

    <view class="xiayiby">
      <view> {{ currentYear }}年{{ currentMonth + 1 }}月 </view>
      <view class="sxygyu">
        <up-icon @click="prevMonth" name="arrow-left" color="#000000"></up-icon>
        &emsp;
        <up-icon
          @click="nextMonth"
          name="arrow-right"
          color="#000000"
        ></up-icon>
      </view>
    </view>

    <!-- 日月切换 -->
    <!-- <div class="header">
      <view style="width: 180rpx"
        ><up-button type="primary" text="上个月" @click="prevMonth"> </up-button
      ></view>

      <h2>{{ currentYear }}年{{ currentMonth + 1 }}月</h2>
      <view style="width: 180rpx">
        <up-button type="primary" text="下个月" @click="nextMonth"> </up-button>
      </view>
    </div> -->
    <!-- 星期 -->
    <view class="weekdays">
      <view v-for="day in weekdays" :key="day" class="weekday">{{ day }}</view>
    </view>
    <!-- 日历 -->
    <!-- , 'xzstle':onxz(day.date)} -->
    <view class="days">
      <view
        v-for="(day, index) in days"
        :key="index"
        :class="[{ disabled: day.isCurrentMonth, xzstle: onxz(day.date) }]"
        @click="day.flags ? selectDay(day) : null"
      >
        <view>{{ day.date.getDate() }}</view>
        <view
          class="dianer"
          v-if="day.flags"
          :class="[{ yyw: onsfym(day.date) }]"
        ></view>
        <!-- <view v-else>-</view> -->
      </view>
    </view>

    <!-- 预约 -->
    <view style="padding: 20rpx" v-if="formdata.sj">
      <!-- <view v-if="formdata.sw == 2 && formdata.xw == 3" style="color: red"
        >已预约满</view
      > -->
      <view>
        <up-radio-group v-model="formdata.type" placement="column">
          <!-- <view style="display: flex; align-items: center"> -->
          <!-- <view style="margin-right: 50rpx">{{ formdata.sj }}</view> -->
          <up-radio
            :customStyle="{ marginBottom: '8px' }"
            :label="formdata.zhsw"
            name="上午"
            :disabled="formdata.sw == 2"
          >
          </up-radio>
          <view style="width: 50rpx"></view>
          <up-radio
            :customStyle="{ marginBottom: '8px' }"
            :label="formdata.zhxw"
            name="下午"
            :disabled="formdata.xw == 3"
          >
          </up-radio>
          <!-- </view> -->
        </up-radio-group>
      </view>
      <!-- <view
        >上午预约数：<text :style="{ color: formdata.sw == 2 ? 'red' : '' }">{{
          formdata.sw
        }}</text></view
      >
      <view
        >下午预约数：<text :style="{ color: formdata.xw == 3 ? 'red' : '' }">{{
          formdata.xw
        }}</text></view
      > -->

      <view style="padding: 20rpx 0">
        <up-button
          type="primary"
          text="确定"
          :disabled="formdata.sw == 2 && formdata.xw == 3"
          @click="sbmin"
        ></up-button>
      </view>
    </view>
    <up-toast ref="uToastRef"></up-toast>
  </view>
</template>
<script>
import { reservationreservation, reservationadd } from "@/api/news/index";
export default {
  data() {
    return {
      rixz: "",
      weekdays: ["日", "一", "二", "三", "四", "五", "六"],
      currentDate: null,
      currentYear: null,
      currentMonth: null,
      pushar: [],
      wanzlid: [],
      formdata: {
        type: "",
        sj: "",
        sw: 0,
        xw: 0,
        xq: "",
        zhsw: "",
        zhxw: "",
      },
    };
  },
  computed: {
    // 计算属性的 getter 函数
    days() {
      let firstDayOfMonth = new Date(this.currentYear, this.currentMonth, 1);
      let lastDayOfMonth = new Date(this.currentYear, this.currentMonth + 1, 0);
      let daysInMonth = lastDayOfMonth.getDate();
      let firstDayOfWeek = firstDayOfMonth.getDay();
      let daysFromPrevMonth = firstDayOfWeek;
      let daysArray = [];
      // 添加上个月的日期
      for (let i = daysFromPrevMonth - 1; i >= 0; i--) {
        let date = new Date(
          this.currentYear,
          this.currentMonth - 1,
          lastDayOfMonth.getDate() - i
        );
        daysArray.push({
          date,
          isCurrentMonth: false,
        });
      }
      // 添加当前月的日期
      for (let i = 1; i <= daysInMonth; i++) {
        const date = new Date(this.currentYear, this.currentMonth, i);
        daysArray.push({
          date,
          isCurrentMonth: true,
          flags:
            (date.getDay() === 3 || date.getDay() === 5) && new Date() < date
              ? true
              : false,
          // yangs:true
        });
      }
      // 添加下个月的日期（填充剩余格子）
      let daysFromNextMonth = 42 - daysArray.length;
      for (let i = 1; i <= daysFromNextMonth; i++) {
        const date = new Date(this.currentYear, this.currentMonth + 1, i);
        daysArray.push({
          date,
          isCurrentMonth: false,
        });
      }
      return daysArray;
    },
  },
  // mounted() {
  //   this.currentDate = new Date();
  //   this.currentYear = this.currentDate.getFullYear();
  //   this.currentMonth = this.currentDate.getMonth();
  //   this.getreservationgetReservationAppListVo(this.currentDate);
  // },
  onShow() {
    this.rixz = ''

    this.currentDate= null
    this.currentYear= null
    this.currentMonth= null
    this.pushar= []
    this.wanzlid= []
    this.formdata= {
        type: "",
        sj: "",
        sw: 0,
        xw: 0,
        xq: "",
        zhsw: "",
        zhxw: "",
      }


















    // 在这里调用需要执行的方法
    this.currentDate = new Date();
    this.currentYear = this.currentDate.getFullYear();
    this.currentMonth = this.currentDate.getMonth();
    this.getreservationgetReservationAppListVo(this.currentDate);
  },
  methods: {
    getreservationgetReservationAppListVo(e) {
      const year = e.getFullYear();
      const month = String(e.getMonth() + 1).padStart(2, "0");
      reservationreservation({ date: year + "-" + month }).then((res) => {
        let arr = res.data || [];
        arr.map((e) => {
          if (this.pushar.indexOf(e.subscribeTime) == -1) {
            this.pushar.push(e.subscribeTime);
            if (e.timeFrame == "上午") {
              this.wanzlid.push({ sj: e.subscribeTime, sw: 1, xw: 0 });
            } else {
              this.wanzlid.push({ sj: e.subscribeTime, xw: 1, sw: 0 });
            }
          } else {
            if (e.timeFrame == "上午") {
              this.wanzlid[this.pushar.indexOf(e.subscribeTime)].sw += 1;
            } else {
              this.wanzlid[this.pushar.indexOf(e.subscribeTime)].xw += 1;
            }
          }
        });
      });
    },
    sbmin() {
      // console.log(this.formdata);
      if (!this.formdata.type) {
        this.$u.toast("请选择时间段，上午还是下午");
      }
      let obj = {
        subscribeTime: this.formdata.sj,
        timeFrame: this.formdata.type,
        whatDay: this.formdata.xq,
      };
      reservationadd(obj)
        .then((res) => {
          if (res.code == 200) {
            let hs = `请${this.currentYear}年${this.currentYear}月${this.rixz}日${this.formdata.xq}`;
            uni.navigateTo({
              url: "/subPages/crowd/bgdata/yycg?userst=" + hs + "&type=1",
            });
          }
        })
        .catch((err) => {
          uToastRef.value.show({
            type: "error",
            message: err,
          });
        });
    },
    // 点击时间
    selectDay(e) {
      console.log(9999);
      console.log(this.wanzlid);
      this.rixz = String(e.date.getDate()).padStart(2, "0");
      let sj = this.gesh(e.date);
      this.formdata.type = "";
      this.formdata.sj = sj;
      let i = this.pushar.indexOf(sj);
      if (i == -1) {
        this.formdata.sw = 0;
        this.formdata.xw = 0;
      } else {
        this.formdata.sw = this.wanzlid[i].sw;
        this.formdata.xw = this.wanzlid[i].xw;
      }
      const days = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
      const dayName = days[e.date.getDay()];
      this.formdata.xq = dayName;
      this.formdata.zhsw =
        sj +
        " " +
        "：" +
        dayName +
        " " +
        "上午" +
        " " +
        "余" +
        (2 - this.formdata.sw);
      this.formdata.zhxw =
        sj +
        " " +
        "：" +
        dayName +
        " " +
        "下午" +
        " " +
        "余" +
        (3 - this.formdata.xw);
    },

    // 是否预约满样式
    onsfym(e) {
      let sj = this.gesh(e);
      if (this.pushar.indexOf(sj) != -1) {
        let lis = this.wanzlid[this.pushar.indexOf(sj)];
        if (lis.sw == 2 && lis.xw == 3) {
          return true;
        } else {
          return false;
        }
      } else {
        return false;
      }
    },
    // 选中样式
    onxz(e) {
      let sj = this.gesh(e);
      if (sj == this.formdata.sj) {
        return true;
      } else {
        return false;
      }
    },
    // 格式化时间
    gesh(e) {
      const year = e.getFullYear();
      const month = String(e.getMonth() + 1).padStart(2, "0");
      const day = String(e.getDate()).padStart(2, "0");
      return `${year}-${month}-${day}`;
    },
    // 上个月
    prevMonth() {
      if (this.currentMonth === 0) {
        this.currentMonth = 11;
        this.currentYear--;
      } else {
        this.currentMonth--;
      }
    },
    // 下个月
    nextMonth() {
      if (this.currentMonth === 11) {
        this.currentMonth = 0;
        this.currentYear++;
      } else {
        this.currentMonth++;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.rlyyxz {
  .topsjian {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #666;
  }
  .xiayiby {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #666;
    align-items: center;
    .sxygyu {
      padding: 10px;
      display: flex;
      align-items: center;
    }
  }

  /* .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #f0f0f0;
  } */

  .weekdays {
    padding: 20rpx 0;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    > view {
      text-align: center;
    }
  }

  .days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    > view {
      text-align: center;
      padding: 10rpx;
      /* border: 1px solid #ccc; */
      color: #ccc;
      background-color: #f9f9f9;

      .dianer {
        display: inline-block;
        width: 10rpx;
        height: 10rpx;
        border-radius: 50%;
        background: #2979ff;
      }

      .yyw {
        background: #e45656;
      }
    }

    /* > view {
      text-align: center;
      padding: 10rpx;
      border: 1px solid #ccc;
      color: #ccc;
      background-color: #f9f9f9;

      .dianer {
        display: inline-block;
        width: 10rpx;
        height: 10rpx;
        border-radius: 50%;
        background: #2979ff;
      }

      .yyw {
        background: #e45656;
      }
    }

    .disabled {
      color: #000;
      background-color: #fff !important;
      // cursor: not-allowed;
    }

    .xzstle {
      background: #a0cfff !important;
    } */
    .disabled {
      color: #000;
      background-color: #fff !important;
      // cursor: not-allowed;
    }

    .xzstle {
      background: #a0cfff !important;
    }
  }
}
</style>
